<template>
  <div class="content-left-box">
    <div class="top-card">
      <div class="com-title com-title2">
        <div class="row-title">
          <div class="l-title">油罐信息</div>
          <img src="../assets/img/title-bg2.png" class="img" alt="">
          <div class="r-tab">
            <div class="tab-item" :class="currentTab == index ? 'active' : ''" @click="onTab(index)"
              v-for="(item, index) of tabList" :key="index">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="guan-wrap">
        <!-- 4个罐罐 -->
        <div class="guan1" v-if="currentTab == 0">
          <div class="info-wrap" v-for="(item, index) of guanData" :key="item.id">
            <div class="info-box">
              <div class="num">{{ item.bfb *100}}%</div>
              <div class="guanEchart" :ref="'guanEchart' + index"></div>
            </div>
            <div class="desc">
              <div class="name">{{ item.name }}</div>
              <div class="yw">液位：{{ item.yw }}L</div>
              <div class="zl">重量：{{ item.zl }}Kg</div>
            </div>
          </div>

        </div>
        <!--10个罐罐 -->
        <div class="guan2" v-if="currentTab == 1">
          <div class="info-wrap" v-for="(item, index) of guanData" :key="item.id">
            <div class="info-box">
              <div class="num">{{ item.bfb*100 }}%</div>
              <div class="guanEchart" :data-ref="'guanEchart' + index" :ref="'guanEchart' + index"></div>
            </div>
            <div class="desc">
              <div class="name">{{ item.name }}</div>
              <div class="yw">液位：{{ item.yw }}L</div>
              <div class="zl">重量：{{ item.zl }}Kg</div>
            </div>
          </div>
        </div>
        <!-- 14个罐罐 -->
        <div class="guan3" v-if="currentTab == 2">
          <div class="info-wrap" v-for="(item, index) of guanData" :key="item.id">
            <div class="info-box">
              <div class="num">{{ item.bfb *100}}%</div>
              <div class="guanEchart" :data-ref="'guanEchart' + index" :ref="'guanEchart' + index"></div>
            </div>
            <div class="desc">
              <div class="name">{{ item.name }}</div>
              <div class="yw">液位：{{ item.yw }}L</div>
              <div class="zl">重量：{{ item.zl }}Kg</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-card">
      <div class="card1">
        <div class="com-title">
          <div class="l-title">实时收发油信息</div>
        </div>
        <div class="list-box">
          <div class="list-title">
            <div class="td">油罐名称</div>
            <div class="td">类型</div>
            <div class="td">油量</div>
            <div class="td">时间</div>
          </div>
          <div class="list-content">
            <vue-seamless-scroll :data="listData" :class-option="defaultOption">
              <div class="list-row" v-for="(item, index) of listData" :key="index">
                <div class="td">油罐名称油罐名称</div>
                <div class="td">出油</div>
                <div class="td">10L</div>
                <div class="td">2024-01-01 12:00:00</div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>

      <div class="card2">
        <div class="com-title">
          <div class="l-title">月度收发油信息</div>
          <div class="r-date">
            <el-date-picker v-model="yearValue" type="month" placeholder="请选择月份" value-format="yyyy-MM" format="yyyy-MM"
              :clearable="false">
            </el-date-picker>
          </div>
        </div>
        <div class="e-content">
          <div class="echart" ref="echarts1"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import 'echarts-liquidfill'
export default {
  components: { vueSeamlessScroll },
  data () {
    return {
      listData: [{}, {}, {}, {}, {}, {}],
      leftEchart1: null,
      leftEchart2: null,
      yearValue: '',
      tabList: [
        {
          name: '规格1',
          id: 1
        },
        {
          name: '规格2',
          id: 2
        },
        {
          name: '规格3',
          id: 3
        }
      ],
      guanList: [
        {
          name: '大豆油罐1',
          id: 1,
          yw: '100',
          zl: '10',
          bfb: '0.30'
        },
        {
          name: '大豆油罐2',
          id: 2,
          yw: '10',
          zl: '10',
          bfb: '0.40'
        },
        {
          name: '大豆油罐3',
          id: 3,
          yw: '20',
          zl: '30',
          bfb: '0.50'
        },
        {
          name: '大豆油罐4',
          id: 4,
          yw: '50',
          zl: '60',
          bfb: '1'
        },
        {
          name: '大豆油罐5',
          id: 5,
          yw: '50',
          zl: '60',
          bfb: '0.3'
        },
        {
          name: '大豆油罐6',
          id: 6,
          yw: '50',
          zl: '60',
          bfb: '0.9'
        },
        {
          name: '大豆油罐7',
          id: 7,
          yw: '50',
          zl: '60',
          bfb: '0.8'
        },
        {
          name: '大豆油罐8',
          id: 8,
          yw: '50',
          zl: '60',
          bfb: '0.2'
        },
        {
          name: '大豆油罐9',
          id: 9,
          yw: '50',
          zl: '60',
          bfb: '0.1'
        },
        {
          name: '大豆油罐10',
          id: 10,
          yw: '50',
          zl: '60',
          bfb: '0.5'
        },
        {
          name: '大豆油罐11',
          id: 11,
          yw: '50',
          zl: '60',
          bfb: '0.2'
        },
        {
          name: '大豆油罐12',
          id: 12,
          yw: '50',
          zl: '60',
          bfb: '0.6'
        },
        {
          name: '大豆油罐13',
          id: 13,
          yw: '50',
          zl: '60',
          bfb: '0.7'
        },
        {
          name: '大豆油罐14',
          id: 14,
          yw: '50',
          zl: '60',
          bfb: '0.4'
        },
        {
          name: '大豆油罐15',
          id: 15,
          yw: '50',
          zl: '60',
          bfb: '0.8'
        },
        {
          name: '大豆油罐16',
          id: 16,
          yw: '50',
          zl: '60',
          bfb: '0.9'
        },
        {
          name: '大豆油罐17',
          id: 17,
          yw: '50',
          zl: '60',
          bfb: '0.4'
        },
        {
          name: '大豆油罐18',
          id: 18,
          yw: '50',
          zl: '60',
          bfb: '0.3'
        },
        {
          name: '大豆油罐19',
          id: 19,
          yw: '50',
          zl: '60',
          bfb: '1'
        },
        {
          name: '大豆油罐20',
          id: 20,
          yw: '50',
          zl: '60',
          bfb: '0.1'
        },
        {
          name: '大豆油罐21',
          id: 21,
          yw: '50',
          zl: '60',
          bfb: '0.2'
        },
        {
          name: '大豆油罐22',
          id: 22,
          yw: '50',
          zl: '60',
          bfb: '0.4'
        },
        {
          name: '大豆油罐23',
          id: 23,
          yw: '10',
          zl: '60',
          bfb: '0.5'
        },
        {
          name: '大豆油罐24',
          id: 24,
          yw: '50',
          zl: '30',
          bfb: '1'
        },
        {
          name: '大豆油罐25',
          id: 25,
          yw: '40',
          zl: '60',
          bfb: '0.3'
        },
        {
          name: '大豆油罐26',
          id: 26,
          yw: '20',
          zl: '40',
          bfb: '0.5'
        },
        {
          name: '大豆油罐27',
          id: 27,
          yw: '30',
          zl: '20',
          bfb: '0.4'
        },
        {
          name: '大豆油罐28',
          id: 28,
          yw: '50',
          zl: '60',
          bfb: '0.3'
        }
      ],
      currentTab: 0,
      guanEchart1: null,
      guanEchart2: null,
      guanEchart3: null,
      guanEchart4: null,
      guanEchart5: null,
      guanEchart6: null,
      guanEchart7: null,
      guanEchart8: null,
      guanEchart9: null,
      guanEchart10: null,
      guanEchart11: null,
      guanEchart12: null,
      guanEchart13: null,
      guanEchart14: null,
      guanEchart15: null,
      guanEchart16: null,
      guanEchart17: null,
      guanEchart18: null,
      guanEchart19: null,
      guanEchart20: null,
      guanEchart21: null,
      guanEchart22: null,
      guanEchart23: null,
      guanEchart24: null,
      guanEchart25: null,
      guanEchart26: null,
      guanEchart27: null,
      guanEchart28: null,
      guanData: []
    }
  },
  computed: {
    defaultOption () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: this.listData.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }

  },
  created () {
    // this.guanData = this.guanList.slice(14, this.guanList.length)

    this.guanData = this.guanList.slice(0, 4)
    this.yearValue = this.$dayjs(new Date()).format('YYYY-MM')
  },
  mounted () {
    this.getEchart1()
    this.renderGuanEchart()
    // this.getGuanEchart1()
    // this.getGuanEchart2()
    // this.getGuanEchart3()
    // this.getGuanEchart4()
    window.addEventListener('resize', () => {
      this.changeResize()
    })
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.changeResize)
    this.leftEchart1 && this.leftEchart1.dispose()
    this.guanEchart1 && this.guanEchart1.dispose()
    this.guanEchart2 && this.guanEchart2.dispose()
    this.guanEchart3 && this.guanEchart3.dispose()
    this.guanEchart4 && this.guanEchart4.dispose()
    this.guanEchart5 && this.guanEchart5.dispose()
    this.guanEchart6 && this.guanEchart6.dispose()
    this.guanEchart7 && this.guanEchart7.dispose()
    this.guanEchart8 && this.guanEchart8.dispose()
    this.guanEchart9 && this.guanEchart9.dispose()
    this.guanEchart10 && this.guanEchart10.dispose()
    this.guanEchart11 && this.guanEchart11.dispose()
    this.guanEchart12 && this.guanEchart12.dispose()
    this.guanEchart13 && this.guanEchart13.dispose()
    this.guanEchart14 && this.guanEchart14.dispose()
    this.guanEchart15 && this.guanEchart15.dispose()
    this.guanEchart16 && this.guanEchart16.dispose()
    this.guanEchart17 && this.guanEchart17.dispose()
    this.guanEchart18 && this.guanEchart18.dispose()
    this.guanEchart19 && this.guanEchart19.dispose()
    this.guanEchart20 && this.guanEchart20.dispose()
    this.guanEchart21 && this.guanEchart21.dispose()
    this.guanEchart22 && this.guanEchart22.dispose()
    this.guanEchart23 && this.guanEchart23.dispose()
    this.guanEchart24 && this.guanEchart24.dispose()
    this.guanEchart25 && this.guanEchart25.dispose()
    this.guanEchart26 && this.guanEchart26.dispose()
    this.guanEchart27 && this.guanEchart27.dispose()
    this.guanEchart28 && this.guanEchart28.dispose()
  },
  methods: {
    renderGuanEchart () {
      this.$nextTick(() => {
        for (let i = 0; i < this.guanData.length; i++) {
          const chartElement = this.$refs['guanEchart' + i]
          this['guanEchart' + i] = this.$echarts.init(chartElement[0])

          console.log('this+ i]', this['guanEchart' + i])
          if (chartElement && chartElement[0]) {
            this['guanEchart' + i].clear()

            const value = Number(this.guanData[i].bfb) >= 0.7 ? 0.7 : this.guanData[i].bfb - 0
            const value1 = Number(this.guanData[i].bfb) >= 0.7 ? 0.8 : Number(this.guanData[i].bfb) - 0 + 0.1
            const value2 = Number(this.guanData[i].bfb) >= 0.7 ? 0.75 : Number(this.guanData[i].bfb) - 0 - 0.1
            // const value = 0.2
            // const value1 = 0.3
            // const value2 = 0.1
            console.log('vvvvvv', value, value1, value2)
            const options = {

              series: [
                {
                  type: 'liquidFill',
                  radius: this.currentTab === 1 ? '100%' : '78%',
                  center: this.currentTab === 1 ? ['50%', '40%'] : ['50%', '50%'],
                  color: [
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#446bf550'
                        },
                        {
                          offset: 1,
                          color: '#2ca3e250'
                        }
                      ],
                      globalCoord: true
                    }
                  ],
                  // data: [10], // data个数代表波浪数
                  data: [value, value1, value2], // data个数代表波浪数
                  backgroundStyle: {
                    borderWidth: 0,
                    color: 'RGBA(51, 66, 127, 0)'
                  },
                  label: {
                    show: false

                  },
                  outline: {
                    show: false
                  // borderDistance: 0,
                  // itemStyle: {
                  //   borderWidth: 0,
                  //   borderColor: '#11216550'
                  // }
                  }
                }

              ]
            }
            this['guanEchart' + i].clear()
            this['guanEchart' + i].setOption(options)
          }
        }
      })
    },
    getGuanEchart1 () {
      this.$nextTick(() => {
        this.guanEchart1 = this.$echarts.init(this.$refs.guanEchart1)
        const value = 0.45
        const value1 = 0.50
        const value2 = 0.40
        const options = {

          series: [
            {
              type: 'liquidFill',
              radius: '78%',
              center: ['50%', '50%'],
              color: [
                {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#446bf550'
                    },
                    {
                      offset: 1,
                      color: '#2ca3e250'
                    }
                  ],
                  globalCoord: true
                }
              ],
              data: [value, value1, value2], // data个数代表波浪数
              backgroundStyle: {
                borderWidth: 0,
                color: 'RGBA(51, 66, 127, 0)'
              },
              label: {
                show: false
                // normal: {
                //   textStyle: {
                //     fontSize: 50,
                //     color: '#fff'
                //   }
                // }
              },
              outline: {
                // show: false
                borderDistance: 0,
                itemStyle: {
                  borderWidth: 0,
                  borderColor: '#11216550'
                }
              }
            }

          ]
        }
        this.guanEchart1.clear()
        this.guanEchart1.setOption(options)
      })
    },
    getGuanEchart2 () {
      this.$nextTick(() => {
        this.guanEchart2 = this.$echarts.init(this.$refs.guanEchart2)
        const value = 0.45
        const value1 = 0.50
        const value2 = 0.40
        const options = {

          series: [
            {
              type: 'liquidFill',
              radius: '78%',
              center: ['50%', '50%'],
              color: [
                {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#446bf550'
                    },
                    {
                      offset: 1,
                      color: '#2ca3e250'
                    }
                  ],
                  globalCoord: true
                }
              ],
              data: [value, value1, value2], // data个数代表波浪数
              backgroundStyle: {
                borderWidth: 0,
                color: 'RGBA(51, 66, 127, 0)'
              },
              label: {
                show: false
                // normal: {
                //   textStyle: {
                //     fontSize: 50,
                //     color: '#fff'
                //   }
                // }
              },
              outline: {
                // show: false
                borderDistance: 0,
                itemStyle: {
                  borderWidth: 0,
                  borderColor: '#11216550'
                }
              }
            }

          ]
        }
        this.guanEchart2.clear()
        this.guanEchart2.setOption(options)
      })
    },
    getGuanEchart3 () {
      this.$nextTick(() => {
        this.guanEchart3 = this.$echarts.init(this.$refs.guanEchart3)
        const value = 0.55
        const value1 = 0.60
        const value2 = 0.65
        const options = {

          series: [
            {
              type: 'liquidFill',
              radius: '78%',
              center: ['50%', '50%'],
              color: [
                {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#446bf550'
                    },
                    {
                      offset: 1,
                      color: '#2ca3e250'
                    }
                  ],
                  globalCoord: true
                }
              ],
              data: [value, value1, value2], // data个数代表波浪数
              backgroundStyle: {
                borderWidth: 0,
                color: 'RGBA(51, 66, 127, 0)'
              },
              label: {
                show: false
                // normal: {
                //   textStyle: {
                //     fontSize: 50,
                //     color: '#fff'
                //   }
                // }
              },
              outline: {
                // show: false
                borderDistance: 0,
                itemStyle: {
                  borderWidth: 0,
                  borderColor: '#11216550'
                }
              }
            }

          ]
        }
        this.guanEchart3.clear()
        this.guanEchart3.setOption(options)
      })
    },
    getGuanEchart4 () {
      this.$nextTick(() => {
        this.guanEchart4 = this.$echarts.init(this.$refs.guanEchart4)
        const value = 0.40
        const value1 = 0.35
        const value2 = 0.30
        const options = {

          series: [
            {
              type: 'liquidFill',
              radius: '78%',
              center: ['50%', '50%'],
              color: [
                {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#446bf550'
                    },
                    {
                      offset: 1,
                      color: '#2ca3e250'
                    }
                  ],
                  globalCoord: true
                }
              ],
              data: [value, value1, value2], // data个数代表波浪数
              backgroundStyle: {
                borderWidth: 0,
                color: 'RGBA(51, 66, 127, 0)'
              },
              label: {
                show: false
                // normal: {
                //   textStyle: {
                //     fontSize: 50,
                //     color: '#fff'
                //   }
                // }
              },
              outline: {
                // show: false
                borderDistance: 0,
                itemStyle: {
                  borderWidth: 0,
                  borderColor: '#11216550'
                }
              }
            }

          ]
        }
        this.guanEchart4.clear()
        this.guanEchart4.setOption(options)
      })
    },
    onTab (index) {
      this.currentTab = index
      if (index === 0) {
        this.guanData = this.guanList.slice(0, 4)
      }
      if (index === 1) {
        this.guanData = this.guanList.slice(4, 14)
      }
      if (index === 2) {
        this.guanData = this.guanList.slice(14, this.guanList.length)
      }
      this.renderGuanEchart()
    },
    changeResize () {
      this.leftEchart1 && this.leftEchart1.resize()
      this.guanEchart1 && this.guanEchart1.resize()
      this.guanEchart2 && this.guanEchart2.resize()
      this.guanEchart3 && this.guanEchart3.resize()
      this.guanEchart4 && this.guanEchart4.resize()
      this.guanEchart5 && this.guanEchart5.resize()
      this.guanEchart6 && this.guanEchart6.resize()
      this.guanEchart7 && this.guanEchart7.resize()
      this.guanEchart8 && this.guanEchart8.resize()
      this.guanEchart9 && this.guanEchart9.resize()
      this.guanEchart10 && this.guanEchart10.resize()
      this.guanEchart11 && this.guanEchart11.resize()
      this.guanEchart12 && this.guanEchart12.resize()
      this.guanEchart13 && this.guanEchart13.resize()
      this.guanEchart14 && this.guanEchart14.resize()
      this.guanEchart15 && this.guanEchart15.resize()
      this.guanEchart16 && this.guanEchart16.resize()
      this.guanEchart17 && this.guanEchart17.resize()
      this.guanEchart18 && this.guanEchart18.resize()
      this.guanEchart19 && this.guanEchart19.resize()
      this.guanEchart20 && this.guanEchart20.resize()
      this.guanEchart21 && this.guanEchart21.resize()
      this.guanEchart22 && this.guanEchart22.resize()
      this.guanEchart23 && this.guanEchart23.resize()
      this.guanEchart24 && this.guanEchart24.resize()
      this.guanEchart25 && this.guanEchart25.resize()
      this.guanEchart26 && this.guanEchart26.resize()
      this.guanEchart27 && this.guanEchart27.resize()
      this.guanEchart28 && this.guanEchart28.resize()
    },
    getEchart1 () {
      this.$nextTick(() => {
        this.leftEchart1 = this.$echarts.init(this.$refs.echarts1)

        const options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            backgroundColor: '#0082CF70',
            borderColor: '#2880FF',
            borderWidth: 1,
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          grid: {
            left: '2%',
            right: '4%',
            bottom: '10%',
            top: '13%',
            containLabel: true
          },
          legend: {
            data: ['发油', '收油'],
            right: 10,
            top: 2,
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            itemWidth: 10,
            itemHeight: 10,
            type: 'scroll',
            orient: 'horizontal',
            itemGap: 14
          },
          xAxis: {
            type: 'category',
            data: ['大豆油', '橄榄油', '花生油', '大豆油2'],
            axisLine: {
              lineStyle: {
                color: '#0A476E'

              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 14
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },

          yAxis: {
            type: 'value',
            name: '吨',
            nameTextStyle: {
              color: '#ffffff70',
              fontSize: 14,
              verticalAlign: 'middle',
              align: 'center'
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: '#0A476E'
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 14
              }
            }

          },
          dataZoom: [{
            show: true,
            height: 12,
            xAxisIndex: [
              0
            ],
            bottom: '3%',
            start: 10,
            end: 90,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '100%',
            handleStyle: {
              color: '#d3dee5'

            },
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            borderColor: '#90979c'
          }, {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }],
          series: [

            {
              name: '发油',
              type: 'bar',
              barWidth: '18',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#8bd46e'
                  }, {
                    offset: 1,
                    color: '#09bcb7'
                  }]),
                  barBorderRadius: 11
                }

              },
              data: [400, 500, 500, 500, 500, 400, 400, 500, 400]
            },
            {
              name: '收油',
              type: 'bar',
              barWidth: '18',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#248ff7'
                  }, {
                    offset: 1,
                    color: '#6851f1'
                  }]),
                  barBorderRadius: 11
                }
              },
              data: [400, 600, 700, 700, 1000, 400, 400, 600, 800]
            }]
        }

        // const app = {
        //   currentIndex: -1
        // }
        // setInterval(function () {
        //   const dataLen = option.series[0].data.length

        //   // 取消之前高亮的图形
        //   myChart.dispatchAction({
        //     type: 'downplay',
        //     seriesIndex: 0,
        //     dataIndex: app.currentIndex
        //   })
        //   app.currentIndex = (app.currentIndex + 1) % dataLen
        //   // console.log(app.currentIndex);
        //   // 高亮当前图形
        //   myChart.dispatchAction({
        //     type: 'highlight',
        //     seriesIndex: 0,
        //     dataIndex: app.currentIndex
        //   })
        //   // 显示 tooltip
        //   myChart.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,
        //     dataIndex: app.currentIndex
        //   })
        // }, 1000)
        this.leftEchart1.clear()
        this.leftEchart1.setOption(options)
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.content-left-box {
  width: 100%;
  height: 100%;

  .top-card {
    margin: 0 14px;
    height: 58%;
    background-color: #092b4f;

    .guan-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

      .guan1 {
        display: flex;
        justify-content: space-between;
        flex: 1;
        height: 100%;
        padding: 0 12px;

        .info-wrap {
          width: 24%;
          height: 100%;
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;

        }

        .info-box {
          background-image: url('../assets/img/bg.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          height: 60%;

          .num {
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 28px;
            color: #fff;
            text-align: center;
          }

          .guanEchart {
            width: 100%;
            height: 80%;
          }

        }

        .desc {
          margin-top: 10px;
          height: 40%;
          width: 100%;
          transform: translateY(-30px);

          .name {
            font-size: 20px;
            text-align: center;
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .yw {
            font-size: 18px;
            color: #F77F07;
            text-align: center;
            margin: 10px 0;

          }

          .zl {
            font-size: 18px;
            color: #11E6F5;
            text-align: center;

          }

        }
      }

      .guan2 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: 0 12px;
        overflow: hidden;
        flex-wrap: wrap;

        .info-wrap {
          width: 18%;
          height: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          transform: translateY(-20px);

          &:nth-child(6),
          &:nth-child(7),
          &:nth-child(8),
          &:nth-child(9),
          &:nth-child(10) {
            transform: translateY(-50px);
          }

        }

        .info-box {
          background-image: url('../assets/img/bg.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          height: 66%;

          .num {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            color: #fff;
            text-align: center;
          }

          .guanEchart {
            width: 100%;
            height: 80%;
          }

        }

        .desc {
          margin-top: 10px;
          height: 10%;
          width: 100%;
          transform: translateY(-30px);

          .name {
            font-size: 18px;
            text-align: center;
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .yw {
            font-size: 16px;
            color: #F77F07;
            text-align: center;
            margin: 4px 0;

          }

          .zl {
            font-size: 16px;
            color: #11E6F5;
            text-align: center;

          }

        }
      }
      .guan3{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: 0 12px;
        overflow: hidden;
        flex-wrap: wrap;

        .info-wrap {
          width: 13%;
          height: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          transform: translateY(-20px);

          &:nth-child(8),
          &:nth-child(9),
          &:nth-child(10),
          &:nth-child(11),
          &:nth-child(12),
          &:nth-child(13),
          &:nth-child(14)
           {
            transform: translateY(-50px);
          }

        }

        .info-box {
          background-image: url('../assets/img/bg.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          height: 66%;

          .num {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 22px;
            color: #fff;
            text-align: center;
          }

          .guanEchart {
            width: 100%;
            height: 80%;
          }

        }

        .desc {
          margin-top: 10px;
          height: 10%;
          width: 100%;
          transform: translateY(-30px);

          .name {
            font-size: 16px;
            text-align: center;
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .yw {
            font-size: 14px;
            color: #F77F07;
            text-align: center;
            margin: 4px 0;

          }

          .zl {
            font-size: 14px;
            color: #11E6F5;
            text-align: center;

          }

        }
      }
    }
  }

  .bottom-card {
    margin: 14px 14px 0;
    background: green;
    height: calc(42% - 14px);
    background-color: #092b4f;
    display: flex;

    .card1,
    .card2 {
      flex: 1;
    }

    .card1 {
      margin-right: 10px;

      .list-box {
        margin: 16px;

        .list-title {
          display: flex;
          align-items: center;
          height: 46px;
          background: #0c3862;
          font-size: 16px;
          color: #fff;
          padding: 0 14px;
          text-align: center;

          .td {
            width: 35%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:nth-child(2) {
              width: 10%;
            }

            &:nth-child(3) {
              width: 15%;
            }

            &:nth-child(2) {
              width: 40%;
            }
          }
        }

        .list-content {
          height: 252px;
          /* overflow-y: auto; */
          overflow: hidden;
        }

        .list-row {
          display: flex;
          align-items: center;
          height: 46px;
          background: #073159;
          font-size: 16px;
          color: #fff;
          padding: 0 14px;
          text-align: center;
          margin-top: 14px;

          .td {
            width: 35%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:nth-child(2) {
              width: 10%;
            }

            &:nth-child(3) {
              width: 15%;
            }

            &:nth-child(2) {
              width: 40%;
            }
          }
        }
      }
    }

    .card2 {
      margin-left: 10px;

      .e-content {
        margin: 16px;
        height: 300px;

        .echart {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.com-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  background-image: url("../assets/img/title-bg.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  padding: 0 20px 0 50px;

  &.com-title2 {
    // background-image: url("../assets/img/title-bg2.png");
    padding: 0;
    position: relative;

    .img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      z-index: 2;
    }

    .row-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 20px 0 50px;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      background-image: -webkit-linear-gradient(right, #0B4C7F, #0E3059, #0E3059);

    }

    .r-tab {
      display: flex;
      align-items: center;
      border: 1px solid #63bdf1;
      border-radius: 4px;
      height: 40px;
      position: relative;
      z-index: 3;

      .tab-item {
        width: 80px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #fff;
        border-right: 1px solid #63bdf1;
        cursor: pointer;

        &.active {
          background: #63bdf1;
        }
      }
    }

  }

  .l-title {
    font-size: 18px;
    letter-spacing: 2px;
    font-family: Alimama;
    background-image: -webkit-linear-gradient(bottom, #14a8ed, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .r-date {
    ::v-deep .el-date-editor {
      border: 1px solid #04577e;
      height: 38px;
      border-radius: 4px;
      background-color: transparent;

      width: 120px;

      .el-input__inner {
        background-color: transparent;
        border: none;
        text-align: center;
        color: #63bdf1;
        font-size: 16px;
        display: flex;
        align-items: center;
        line-height: 38px;
        justify-content: center;
        height: 100%;
        padding-right: 10px;
      }

      .el-input__prefix {
        color: #63bdf1;
        transform: translateY(-1px);
        font-size: 14px;

      }
    }
  }
}
</style>
